<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品的详情页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul li {
            list-style: none;
        }
    </style>
</head>

<body>
    <ul id="page">
        <!-- <li class="goods1"><img src="../images/g1.jpg">
            <p>姓名：阿联酋美女1号</p>
            <p>价格：20</p>
            <p>年龄：20</p>
        </li> -->
    </ul>


    <script src="../js/public.js"></script>
    <script>
        let page = document.getElementById('page');
        var goodlist = [
            { id: 1, url: '../images/g1.jpg', name: '阿联酋美女1号', price: 1998, age: 20 },
            { id: 2, url: '../images/g2.jpg', name: '阿联酋美女2号', price: 98, age: 18 },
            { id: 3, url: '../images/g3.jpg', name: '阿联酋美女3号', price: 998, age: 22 },
            { id: 4, url: '../images/g4.jpg', name: '阿联酋美女4号', price: 9.8, age: 24 },
            { id: 5, url: '../images/g3.jpg', name: '阿联酋美女5号', price: 9888, age: 18 }
        ]
        console.log(location.search);
        let data = location.search.substring(1);
        let newObj = strToObj(data);

        let resArr = goodlist.filter(function (item) {
            return newObj.id == item.id;
        })
        console.log(resArr[0].age)
        page.innerHTML = `<li>
                            <img src="${resArr[0].url}">
                            <p>姓名：${resArr[0].name}</p>
                            <p>价格：${resArr[0].price}</p>
                            <p>年龄：${resArr[0].age}</p>
                        </li>`
                        console.log(page)
    </script>

</body>